<template>
  <div class="con">
    <div class="contbox6_10">
      <p class="titlelist6_10">
        库存管理
        <span class="text">&nbsp;&nbsp;/&nbsp;&nbsp;</span>入库记录
      </p>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form :model="searchData" label-width="80px">
            <el-form-item label="批次号">
              <el-input
                v-model="searchData.batchNo"
                placeholder="请输入批次号"
              ></el-input>
            </el-form-item>
            <el-form-item
              label="入库订单号" 
              label-width="100px"
              style="margin-left: -20px; margin-right: 20px"
            >
              <el-input
                v-model="searchData.orderCode"
                placeholder="请输入入库订单号"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属OEM">
              <el-input
                v-model="searchData.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构ID">
              <el-input
                v-model="searchData.officeUid"
                placeholder="请输入机构ID"
              ></el-input>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="searchData.officeName"
                placeholder="请输入机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="入库类型">
              <el-select
                v-model="searchData.operType"
                clearable
                placeholder="请选择入库类型"
              >
                <el-option
                  v-for="item in ruOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="入库来源">
              <el-input
                v-model="searchData.froOfficeName"
                placeholder="请输入入库来源"
              ></el-input>
            </el-form-item>
            <el-form-item label="品牌名称">
              <el-select
                v-model="searchData.channelUid"
                clearable
                placeholder="请选择品牌名称"
              >
                <el-option
                  v-for="(val, index) in brand"
                  :label="val.channelName"
                  :value="val.uid"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="商品类型">
              <el-cascader
                :disabled="sign"
                v-model="searchData.productType"
                :options="options"
                placeholder="请选择商品类型"
                :props="{ emitPath: false }"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input
                v-model="searchData.productName"
                placeholder="请输入商品名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="入库时间">
              <el-date-picker
                v-model="searchData.startDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="开始日期"
              >
              </el-date-picker>
              -
              <el-date-picker
                v-model="searchData.endDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
          </el-form>
        </div>
        <div class="buttons">
          <el-button
            type="primary"
            v-if="isAuth('inStockSearch')"
            @click="queryPayActiveLists"
            >搜索</el-button
          >
          <el-button type="" v-if="isAuth('inStockReset')" @click="reset">重置</el-button>
          <el-button
            type="primary"
            style="margin-left: 40px"
            class="butt"
            @click="warehousing"
            v-if="isAuth('inStockExport')"
            @selection-change="handleSelectionChange"
            >批量导出</el-button
          >
          <!-- <el-button
            v-if="totalNum > 0"
            style="margin-left: 10px"
            type="primary"
            @click="payActiveListExport"
            class="butt"
            >导出</el-button
          > -->
        </div>
        <div class="table">
          <el-table
            :data="tableData"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            border
            @selection-change="handleSelectionChange"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            v-loading="listLoading"
          >
            <el-table-column type="selection" min-width="30"></el-table-column>
            <el-table-column
              prop="batchNo"
              min-width="150"
              show-overflow-tooltip
              label="批次号"
            ></el-table-column>
            <el-table-column
              prop="orderCode"
              min-width="150"
              show-overflow-tooltip
              label="入库订单号"
            ></el-table-column>
            <el-table-column
              prop="oemName"
              min-width="120"
              label="归属OEM"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="officeUid"
              min-width="150"
              label="机构ID"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="officeName"
              min-width="150"
              label="机构名称"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              prop="operTypeName"
              min-width="80"
              show-overflow-tooltip
              label="入库类型"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="froOfficeName"
              min-width="80"
              label="入库来源"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="channelName"
              min-width="100"
              label="品牌名称"
            ></el-table-column>
            <el-table-column
              prop="typeName"
              show-overflow-tooltip
              min-width="80"
              label="商品类型"
            ></el-table-column>
            <!-- <el-table-column
              prop="leftCnt"
              show-overflow-tooltip
              min-width="80"
              label="库存数量"
            ></el-table-column> -->
            <el-table-column
              prop="productName"
              show-overflow-tooltip
              min-width="80"
              label="商品名称"
            ></el-table-column>
            <el-table-column
              show-overflow-tooltip
              min-width="80"
              prop="actualCnt"
              label="发生数量"
            >
            </el-table-column>
            <el-table-column
              prop="createDate"
              show-overflow-tooltip
              min-width="160"
              label="入库时间"
            ></el-table-column>
            <!-- <el-table-column
              prop="shopUpCnt"
              show-overflow-tooltip
              min-width="100"
              label="上架数量"
            ></el-table-column> -->

            <!-- <el-table-column min-width="100" label="状态">
              <template slot-scope="scope">
                <span v-if="scope.row.status == 0">启用</span>
                <span v-if="scope.row.status == 1">停用</span>
              </template>
            </el-table-column> -->
            <el-table-column min-width="100" label="操作">
              <template slot-scope="scope">
                <el-button @click="catDetail(scope.row)" v-if="isAuth('inStockDetail')" type="text"
                  >查看</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <el-pagination
          background
          style="text-align: right; padding: 0 20px"
          class="pagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="formInline.page"
          :page-size="formInline.number"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[20, 50, 100]"
          :total="total"
        ></el-pagination>
        <!-- 配置弹框 -->
        <el-dialog
          :visible.sync="dialogVisible1"
          width="400px"
          :before-close="handleClose"
        >
          <template slot="title">
            <div class="configCss" style="text-align: center">
              售卖配置
              <el-popover placement="top-start" width="280" trigger="hover">
                <slot>
                  <div class="popoverTitle">上架控制</div>
                  <div class="proverCont">上架控制是，只能够买在架数量；</div>
                  <div class="proverCont">上架控制位否，可无限购买；</div>
                  <div class="popoverTitle">在架数量</div>
                  <div class="proverCont">
                    直接输入商品在app可购买的数量，通过上架控制做限制
                  </div>
                  <div class="popoverTitle">最少和最多购买限制条件</div>
                  <div class="proverCont">
                    输入商品最少和最多购买数量，不输入则不做限制，至少为1
                  </div>
                </slot>
                <span slot="reference" class="handHover">?</span>
              </el-popover>
            </div>
          </template>
          <div>
            <div class="saleList">
              <div class="saleTitle">
                <span style="color: red">*</span> 上架控制
              </div>
              <div class="saleCont">
                <el-select v-model="value" class="selectYN">
                  <el-option label="是" value="0"></el-option>
                  <el-option label="否" value="1"></el-option>
                </el-select>
              </div>
              <div style="margin-left: 5px">当前库存数量 20</div>
            </div>
            <div class="saleList">
              <div class="saleTitle">
                <span style="color: red">*</span> 在架数量
              </div>
              <div class="saleCont">
                <el-input
                  v-model="value"
                  @input="
                    (value) => {
                      datas.shopUpCnt = value.replace(/[^\d]+/g, '');
                    }
                  "
                  class="numVal"
                  placeholder="请输入在架数量"
                ></el-input>
              </div>
            </div>
            <div class="saleList">
              <div class="saleTitle">最少购买数量</div>
              <div class="saleCont">
                <el-input
                  v-model="datas"
                  @input="
                    (value) => {
                      datas.saleMinCnt = value.replace(/[^\d]+/g, '');
                    }
                  "
                  class="numVal"
                  placeholder="请输入最少购买数量"
                ></el-input>
              </div>
            </div>
            <div class="saleList">
              <div class="saleTitle">最多购买数量</div>
              <div class="saleCont">
                <el-input
                  v-model="datas"
                  @input="
                    (value) => {
                      datas.saleMaxCnt = value.replace(/[^\d]+/g, '');
                    }
                  "
                  class="numVal"
                  placeholder="请输入最多购买数量"
                ></el-input>
              </div>
            </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取 消</el-button>
            <el-button type="primary" @click="submitMai">确 定</el-button>
          </span>
        </el-dialog>
      </div>
    </div>

    <!-- 弹框 -->
    <el-dialog
      title="查看"
      :visible.sync="dialogVisible3"
      width="700px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div>
        <div class="contBoxTop" style="margin-bottom: 15px">
          <div class="boxLeft">序列号SN：</div>
          <el-input
            v-model="getListDatas.productCode"
            :clearable="true"
            placeholder="请输入序列号SN"
          ></el-input>
          <el-button
            type="primary"
            size="mini"
            style="margin-left: 20px"
            @click="dialogSearch"
            >搜索</el-button
          >
        </div>
        <div class="content1">
          <el-table
            :data="tableData1"
            :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
            stripe
            
            border
            max-height="320px"
            style="overflow-y:auto"
            @selection-change="handleSelectionChange"
            :row-style="{ height: '0px' }"
            :cell-style="{ padding: '0px' }"
            class="tables"
            v-loading="listLoading"
          >
            
            <el-table-column
            style="text-align:center"
              prop="productCode"
              min-width="150"
              show-overflow-tooltip
              label="序列号SN"
            ></el-table-column>
          </el-table>
          <el-pagination
            background
            small
            style="text-align: right; padding: 0 20px"
            class="pagination"
            @size-change="handleSizeChangeD"
            @current-change="handleCurrentChangeD"
            :current-page="getListDatas.page"
            :page-size="getListDatas.number"
            layout="total, sizes, prev, pager, next, jumper"
            :page-sizes="[20, 50, 100]"
            :total="totalPage"
          ></el-pagination>
        </div>
        <div style="clear:both"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogVisible3 = false">取 消</el-button> -->
        <!-- <el-button type="primary" @click="dialogVisible3 = false"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>
<script type="text/ecmascript-6">
import bus from "../../assets/js/bus";
import https from "../../plugins/https.js";
import axios from "axios";
import qs from "qs";
import Tree from "../tree/index";
// 批量导出
import { exportFile } from "../../plugins/expord";
import { CompareDate } from "../../assets/js/commion";

export default {
  data() {
    return {
      dilogId: "",
      formInline: {
        productName: "",
      },
      getListDatas: {
        page: 1,
        number: 20,
        id: "",
        productCode: "", //搜索的序列号
      },
      tableData1: "",
      dialogVisible3: false,
      totalPage:"",
      searchData: {
        batchNo: "",
        orderCode: "",
        officeUid: "",
        officeName: "",
        oemUid: "",
        oemName: "",
        operType: "",
        froOfficeName: "",
        channelName: "",
        typeName: "",
        productName: "",
        startDate: "",
        endDate: "",
        actualType: 0,
        page: "1",
        productType: "",
        number: "20",
        idList:[]
      }, 
      SelectData: "",
      total: "",
      ruOptions: [],
      options: "",
      tableData: "",
      brand: "",
    };
  },
  components: {
    Tree,
  },
  created() {
    //   调用列表数据
    this.getListData();
    // 入库类型框
    this.getType();
    // 品牌名称
    this.getchanneName();
    // 商品类型
    this.getCascadeProductType();
  },
  mounted() {},
  methods: {

    // 弹框里面的分页
    // 分页变化
    handleCurrentChangeD(val) {
      console.log(val);
      this.getListDatas.page=val
      this.getDilData();
    },
    // 每页多少条
    handleSizeChangeD(val) {
      console.log(val);
      this.getListDatas.number=val
      this.getDilData();
    },

    // 获取弹框列表数据
    getDiData() {},
    // 弹框里面的搜索
    dialogSearch() {
      this.getListDatas.page=1;
      this.getDilData();
    },
    // 重置
    reset() {
      this.searchData.batchNo = "";
      this.searchData.orderCode = "";
      this.searchData.officeUid = "";
      this.searchData.officeName = "";
      this.searchData.oemUid = "";
      this.searchData.oemName = "";
      this.searchData.operType = "";
      this.searchData.froOfficeName = "";
      this.searchData.channelName = "";
      this.searchData.typeName = "";
      this.searchData.productName = "";
      this.searchData.startDate = "";
      this.searchData.endDate = "";
      this.searchData.productType = "";
      this.searchData.channelUid = ""
      this.searchData.number=20;
      this.searchData.page=1
      this.getListData();
    },
    // 获取品牌名称
    getchanneName() {
      https.vipBrandList({})
        .then((res) => {
          console.log("品牌名称");
          console.log(res);
          this.brand = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getCascadeProductType() {
      axios
        .post("/api/brand/cascadeProductType", {})
        .then((res) => {
          console.log("商品类型");
          console.log(res);
          this.options = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取入库类型
    getType() {
      axios
        .post("api/sys/dict/queryDictList", { type: "in_oper_type" })
        .then((res) => {
          console.log("入库类型下拉框");
          console.log(res);
          this.ruOptions = res.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 表格选中
    handleSelectionChange(val) {
      console.log(val);
      this.SelectData = val;
    },
    // 搜索按钮列表
    queryPayActiveLists() {
      console.log(this.searchData);
      // this.searchData.startDate = this.searchData.startDate + " 00:00:00"
      // this.searchData.endDate = this.searchData.endDate + " 59:59:59"
      if (this.searchData.startDate != "" && this.searchData.endDate != "") {
        if (CompareDate(this.searchData.startDate, this.searchData.endDate)) {
          this.searchData.page = 1;
          this.getListData();
        } else {
          layer.open({
            content: "结束时间不能早于开始时间",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
        }
      } else {
        this.searchData.page = 1;
        this.getListData();
      }
    },
    //   获取列表数据
    getListData() {
      console.log(this.searchData);
      this.SelectData = [];
      axios
        .post("api/mall/storeRecordListData", this.searchData)
        .then((res) => {
          console.log("列表数据");
          this.total = res.data.total;
          this.tableData = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 批量导出
    warehousing() {
      if (this.SelectData.length > 0) {
        for (let i = 0; i < this.SelectData.length; i++) {
          this.searchData.idList.push(+this.SelectData[i].id);
        }
      } else {
        this.searchData.idList = [];
      }
      exportFile(
        "api/mall//storeRecordListData/excel/export",
        this.searchData,
        "入库记录"
      );
    },
    getDilData() {
      axios
        .post("api/mall/storeRecordListDataDetail", this.getListDatas)
        .then((res) => {
          console.log("获取出来的数据");
          console.log(res);
          this.tableData1 = res.data.data;
          this.totalPage = res.data.total
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //   查看
    catDetail(val) {
      // let channelName = val.channelName;
      // let typeName = val.typeName;
      // let productName = val.productName;
      // let productNo = val.productNo;
      // this.dilogId=val.id
      this.getListDatas.id = val.id;
      this.getDilData();
      this.dialogVisible3 = true;
      // this.$router.push({
      //   name: "catSarehousings",
      //   query: {
      //     id: val.id,
      //     channelName: channelName,
      //     typeName: typeName,
      //     productName: productName,
      //     productNo: productNo,
      //   },
      // });
      console.log(val);
    },
    // 分页变化
    handleCurrentChange(val) {
      console.log(val);
      this.searchData.page = val;
      this.getListData();
    },
    // 每页多少条
    handleSizeChange(val) {
      this.searchData.number = val;
      console.log(val);
      this.getListData();
    },
  },
};
</script>

<style scoped>
.saleList {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
/deep/ .numVal {
  width: 200px;
}
/deep/ .numVal .el-input__inner {
  width: 100%;
}
.configCss {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
}
.saleTitle {
  width: 100px;
  margin-right: 10px;
  text-align: right;
}
.boxLeft {
  margin-right: 10px;
}
.con {
  position: relative;
}
.el-main {
  padding: 0 !important;
}
.elP {
  width: 100%;
  margin: 20px 0;
  font-size: 15px;
  font-weight: 500;
}
.elbtn {
  float: right;
  margin: 20px;
}
.img {
  display: block;
  width: 100%;
}
.money p {
  width: 100%;
  line-height: 30px;
}
.status {
  font-size: 14px;
  margin-bottom: 20px;
}
.color {
  color: #e6a23c;
}
.mt20 {
  margin-top: 20px;
}
.shopList {
  width: 100%;
  min-height: 30px;
  display: block;
  float: left;
  line-height: 80px;
  font-size: 16px;
}
.formItem {
  float: left;
}
.pagination {
  margin-top: 10px;
}
.btnExport {
  float: left;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #409eff;
  border-color: #409eff;
}
.btn {
  float: right;
}
.contBoxTop {
  display: flex;
  align-items: center;
}
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
.text {
  color: #999;
}
.search {
  float: right !important;
  margin-top: 0px !important;
}
.table {
  margin-top: 20px;
}

.top {
  padding-bottom: 20px;
}
/deep/ .el-dialog {
  padding-bottom: 20px;
}
/deep/ .el-cascader {
  line-height: 32px;
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
  height: 32px;
}
/deep/ .count > .el-input__inner {
  width: 246px;
}
/deep/ .selectYN {
  width: 100px;
}
/deep/ .selectYN .el-input {
  width: 100%;
}
/deep/ .selectYN .el-input__inner {
  width: 100%;
}
/deep/ .handHover {
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
  background: #ccc;
  cursor: pointer;
}
.popoverTitle {
  font-size: 16px;
  margin-bottom: 7px;
  margin-top: 7px;
  font-family: "Microsoft YaHei";
}
/deep/ .tables.el-table .cell {
    text-align: center;
}  
/* /deep/ .el-icon-question:hover {
  display: none !important;
} */
/* .tooltip-content .div {
    line-height: 18px;

} */
</style>
